{extend name="common/base"}
{block name="content"}
<div class="layui-container">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">类型名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请填写合同类型名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-block">
                <select name="category_id" required lay-verify="required" lay-search lay-filter="category">
                    <option value>请输入选择</option>
                    {volist name="categories" id="category"}
                    <option value="{$category.id}">{$category.name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="sn">
            <label class="layui-form-label">类型编号</label>
            <div class="layui-input-block">
                <input type="text" name="sn" required lay-verify="required" placeholder="类型编号" autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="note" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="location.href='/type/all'">返回</button>
            </div>
        </div>
    </form>
</div>
{/block}

{block name="js"}
{__block__}
<script>
    layui.use(['form','util'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var util = layui.util;

        // 双击自定义类型编号
        $('#sn').on('dblclick', function () {
            if ($('select[name="category_id"]').val().length === 0) {
                layer.msg('请先选择合同分类');
                return false;
            }
            var sn = $('input[name="sn"]').val();
            layer.prompt({
                formType: 0,
                value: sn,
                title: '请输入自定义合同类型编号',
            }, function(value, index, elem){
                if (isNaN(value)) {
                    layer.msg('只能输入数字');
                    return false;
                }
                var newSn = util.digit(Math.abs(parseInt(value)), 3) + '';
                $('input[name="sn"]').val(newSn)
                layer.msg('合同类型编号号自定义完成');
                layer.close(index);
            });
        })

        // 监听类别
        form.on('select(category)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            var snLoader = layer.load(1);
            $.get({
                url: '/type/getNextSn/' + data.value,
                success: function (result) {
                    layer.close(snLoader);
                    if (result == -1) {
                        layer.open({content:'获取类别编号失败！', icon:2});
                    } else {
                        $('input[name="sn"]').val(result);
                    }
                },
                error: function (error) {
                    layer.close(snLoader);
                    console.log(error)
                    layer.open({content:'内部错误！', icon:2});
                }
            });
        });
        //监听提交
        form.on('submit(formDemo)', function(data){
            var index1 = layer.load(1);
            console.log(data.field)
            $.post({
                type: 'POST',
                url: '/type/add',
                data: data.field,
                success: function (result) {
                    console.log(result);
                    layer.close(index1);
                    if (result === 1) {
                        layer.msg('合同类型添加成功', function () {
                            location.href='/type/all';
                        });
                    } else if (result === -1) {
                        layer.open({content:'添加失败！合同类型名称已存在！', icon:2});
                    } else if (result === -2) {
                        layer.open({content:'添加失败！合同类型编号已存在！', icon:2});
                    }
                },
                error: function (error) {
                    layer.close(index1);
                    layer.msg('内部错误，添加失败', {icon: 2});
                    console.log(error);
                }
            });
            return false;
        });
    });

</script>
{/block}